<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script>if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); </script>
    
    
        <link rel="preload" crossorigin="crossorigin" href="/fonts/roboto/Roboto-Regular.woff2" as="font">
        <link rel="preload" crossorigin="crossorigin" href="/fonts/roboto/Roboto-Bold.woff2" as="font">
    
    
    
        <link rel="shortcut icon" href="/icons/favicon.ico">
    

    
    
        
<link rel="stylesheet" href="/css/mdui.min.v1.0.0.css">

    
    
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/iconfont.css">


    
    

    
        <script data-ad-client="ca-" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    












          


    
    
    <title>
        
            AngularJS | 吴豪阳的数据库
        
    </title>
    
    
<meta name="generator" content="Hexo 5.4.1"></head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-teal mdui-theme-accent-blue">
  
  <header class="mdui-appbar mdui-appbar-fixed">
  <div id="toolbar" class="mdui-toolbar mdui-color-theme">
    <button class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#sidebar', swipe: true}"><i class="iconfont icon-menu"></i></button>
    <a href="/" class="mdui-typo-headline">吴豪阳的数据库</a>
    <a href="/" class="header-subtitle mdui-typo-headline"></a>
    <div class="mdui-toolbar-spacer"></div>
    <button class="mdui-btn mdui-btn-icon" mdui-dialog="{target: '#search'}" mdui-tooltip="{content: 'search'}"><i class="iconfont icon-search"></i></button>
  </div>
</header>

<div class="mdui-dialog" id="search">
  
    <div class="search-form">
      <input type="search" class="search-form-input" placeholder="请输入关键字" onfocus="listenSearchFunc()">
    </div>
    <div class="search-result" data-resource="/search.xml"></div>
  
</div>

  <aside id="sidebar" class="mdui-drawer">
    <div class="mdui-tab" mdui-tab>
        <a href="#sidebar-tab1" id="sidebartab" class="mdui-ripple mdui-tab-active">站点概览</a>
        <a href="#sidebar-tab2" id="sidebartab" class="mdui-ripple">关于</a>
    </div>

    
    <div id="sidebar-tab1" class="mdui-p-a-1">
        <div class="mdui-list">
            
                
                <a href="/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-home"></i>
                    </div>
                    <div class="mdui-list-item-content">主页</div>
                </a>
            
                
                <a href="/tags/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-bookmark"></i>
                    </div>
                    <div class="mdui-list-item-content">标签</div>
                </a>
            
                
                <a href="/categories/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-folder"></i>
                    </div>
                    <div class="mdui-list-item-content">分类</div>
                </a>
            
                
                <a href="/archives/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-archive"></i>
                    </div>
                    <div class="mdui-list-item-content">归档</div>
                </a>
            
                
                <a href="/tools/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-tools"></i>
                    </div>
                    <div class="mdui-list-item-content">工具箱</div>
                </a>
            
                
                <a href="/about/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-user"></i>
                    </div>
                    <div class="mdui-list-item-content">关于</div>
                </a>
            
            <div class="mdui-list-item mdui-ripple">
                <div class="mdui-list-item-icon">
                    <i class="iconfont icon-moon"></i>
                </div>
                <div class="mdui-list-item-content">夜间模式</div>
                <label class="mdui-switch" id="darkmode">
                  <input type="checkbox" id="nightmode_switch"/>
                  <i class="mdui-switch-icon"></i>
                </label>
            </div>           
        </div>
    </div>

    
    <div id="sidebar-tab2" class="mdui-p-a-1">
        <div class="sidebar-overview">
            <div class="sidebar-avatar">
                
                    <img src="/icons/avatar.gif"/>
                
            </div>
            <div class="sidebar-author-name">John Doe</div>
            <div class="sidebar-description"></div>
        </div>
        <div class="sidebar-links">
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-mail"></i></span>
                    <a href="mailto:xxx@xxx.com" class="mdui-chip-title">E-Mail</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-github"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">GitHub</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-steam"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">Steam</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-weibo"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">Weibo</a>
                </div>
            
        </div>
        <ul class="mdui-list" mdui-collapse="{accordion: true}">
            <li class="mdui-collapse-item">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-link"></i>
                    </div>
                    <div class="mdui-list-item-content">友情链接</div>
                    <div class="mdui-collapse-item-arrow">
                        <i class="mdui-list-item-icon iconfont icon-angle-down"></i>
                    </div>
                </div>
                <ul id="linksList" class="mdui-collapse-item-body mdui-list mdui-list-dense">
                    
                        <a target="_blank" rel="noopener" href="https://garybear.cn/hexo-theme-meadow/" class="mdui-list-item mdui-ripple">
                            Meadow说明文档
                        </a>
                    
                </ul>
            </li>
        </ul>
    </div>

    <div class="mdui-divider"></div>
    
    
</aside>
  
  <main id="main-contain" class="mdui-container mdui-m-t-5">
    <article id="article" class="mdui-card mdui-p-b-2 mdui-m-b-5">
  <header class="mdui-card-media">
    
    
      <div class="post-header"> 
  <a class="post-header-title" href="/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/">AngularJS</a>
  <div class="post-header-meta">
    <span>
      <span class="iconfont icon-calendar"></span>
      发布于:&nbsp;2022-02-21
    </span>
    <span>
      <span class="iconfont icon-calendar-check"></span>
      更新于:&nbsp;2022-03-05
    </span>
    <span>
      <span class="iconfont icon-folder"></span>
      分类于:&nbsp;<a class="category-link" href="/categories/%E5%89%8D%E7%AB%AF%E7%99%BE%E7%A7%91/">前端百科</a>
    </span>
    
      <span>
        <span class="iconfont icon-eye"></span>
        阅读次数:&nbsp;
        <span id="busuanzi_container_page_pv"><span id="busuanzi_value_page_pv"></span></span>
      </span>
    
  </div>
</div>   
    



    
    
    <div class="mdui-card-menu">
    
      <button class="mdui-btn mdui-btn-icon mdui-text-color-teal" mdui-menu="{target: '#share_menu', align: 'right'}"><i class="iconfont icon-share"></i></button>
      <ul class="mdui-menu" id="share_menu">
        <li class="mdui-menu-item">
          <a href="http://service.weibo.com/share/share.php?appkey=&title=AngularJS&url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/&pic=http://example.com/null&searchPic=false&style=simple" target="_blank" class="mdui-ripple">分享到 Weibo</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://twitter.com/intent/tweet?text=AngularJS&url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/&via=John Doe" target="_blank" class="mdui-ripple">分享到 Twitter</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/" target="_blank" class="mdui-ripple">分享到 Facebook</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://plus.google.com/share?url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/" target="_blank" class="mdui-ripple">分享到 Google+</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/&title=AngularJS" target="_blank" class="mdui-ripple">分享到 LinkedIn</a>
        </li>
        <li class="mdui-menu-item">
          <a href="http://connect.qq.com/widget/shareqq/index.html?site=吴豪阳的数据库&title=AngularJS&summary=&pics=http://example.com/null&url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/" target="_blank" class="mdui-ripple">分享到 QQ</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://telegram.me/share/url?url=http://example.com/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/&text=AngularJS" target="_blank" class="mdui-ripple">分享到 Telegram</a>
        </li>
      </ul>
    
  </div>
  </header>
  
  
  
  
  <div class="post-tags">
    
      <i class="iconfont icon-tag">
        <a rel="tag" href = /tags/AngularJS/ >AngularJS</a>
      </i>
    
  </div>

  
  <div class="mdui-card-content mdui-typo mdui-p-x-4">
    <h1 id="AngularJS"><a href="#AngularJS" class="headerlink" title="AngularJS"></a>AngularJS</h1><pre><code>AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google所收购。
AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。 
AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngualrJS。AngularJS是用JavaScript编写，而Angular采TypeScript语言编写，是ECMAScript 6的超集。
</code></pre>
<h1 id="产生背景"><a href="#产生背景" class="headerlink" title="产生背景"></a>产生背景</h1><pre><code>AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
</code></pre>
<h2 id="类库-类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等"><a href="#类库-类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等" class="headerlink" title="类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等"></a>类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等</h2><h2 id="框架-框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。"><a href="#框架-框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。" class="headerlink" title="框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。"></a>框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。</h2><pre><code>AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号&#123;&#123;&#125;&#125;语法进行数据绑定；
    使用DOM控制结构来实现迭代或者隐藏DOM片段；
    支持表单和表单的验证；
    能将逻辑代码关联到相关的DOM元素上；
    能将HTML分组成可重用的组件。

#  语言特点

    AngularJS试图成为WEB应用中的一种客户端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，还是一个完整的客户端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是在你构建应用的起点，并且你仍能灵活变动。
    AngularJS的一些出众之处如下：
        构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
        测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。
        具有目录布局和测试脚本的种子应用作为起点。

#  主要功能

    AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建 [1]  ，就得了解什么不适合用AngularJS构建。

    如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
    下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证，然后用来计算总值，这个总值会被格式化成本地的样式。下面有一些开发者常见的概念，你需要先了解一下：

    1. 将数据模型(data-model)关联到视图(UI)上；
    2. 写、读、验证用户的输入；
    3. 根据模型计算新的值；
    4. 将输出格式本地化，
#  语言风格

    Angular信奉的是，当组建视图(UI)同时又要写软件逻辑时，声明式的代码会比命令式的代码好得多，尽管命令式的代码非常适合用来表述业务逻辑。

    将DOM操作和应用逻辑解耦是一种非常好的思路，它能大大改善代码的可调性；

    将测试和开发同等看待是一种非常非常好的思路，测试的难度在很大程度上取决于代码的结构；

    将客户端和服务器端解耦是一种特别好的做法，它能使两边并行开发，并且使两边代码都能实现重用；

    如果框架能够在整个开发流程里都引导着开发者：从设计UI，到编写业务逻辑，再到测试，那对开发者将是极大的帮助；

    “化繁为简，化简为零”总是好的。

    AngularJS能将你从以下的噩梦中解脱出来：
    使用回调：回调的使用会打乱你的代码的可读性，让你的代码变得支离破碎，很难看清本来的业务逻辑。移除一些常见的代码，例如回调，是件好事。大幅度地减少你因为JavaScript这门语言的设计而不得不写的代码，能让你把自己应用的逻辑看得更清楚。

    手动编写操作DOM元素的代码：操作DOM是AJAX应用很基础的一部分，但它也总是很“笨重”并且容易出错。用声明的方式描述的UI界面可随着应用状态的改变而变化，能让你从编写低级的DOM操作代码中解脱出来。绝大部分用AngularJS写的应用里，开发者都不用再自己去写操作DOM的代码，不过如果你想的话还是可以去写。

    对UI界面读写数据：AJAX应用的很大一部是CRUD操作。一个经典的流程是把服务端的数据组建成内部对象，再把对象编成HTML表单，用户修改表单后再验证表单，如果有错再显示错误，然后将数据重新组建成内部对象，再返回给服务器。这个流程里有太多太多要重复写的代码，使得代码看起来总是在描述应用的全部执行流程，而不是具体的业务逻辑和业务细节。

    开始前得写大量的基础性的代码：通常你需要写很多的基础性的代码才能实现一个“Hello World”的应用。用AngularJS的话，它会提供一些服务让你很容易地正式开始写你的应用，而这些服务都是以一种Guice-like dependency-injection式的依赖注入自动加入到你的应用中去的，这让你能很快的进入你应用的具体开发。特别的是，你还能全盘掌握自动化测试的初始化过程。

    AngularJS 表达式写在双大括号内：&#123;&#123; expression &#125;&#125;。 

AngularJS 表达式   把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。

AngularJS 将在表达式书写的位置&quot;输出&quot;数据。

AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 &#123;&#123; 5 + 5 &#125;&#125; 或 &#123;&#123; firstName + " " + lastName &#125;&#125;
</code></pre>

  </div>
  <!--文末结束语-->
  
    <div style="text-align:center;color: #ccc;font-size:24px;"> --- 本文结束 <i class="iconfont icon-heartbeat" style="font-size:24px;"></i> The End --- </div>
  
  <!--页脚广告-->
  
  <div class="mdui-divider"></div>
  
  <nav>
    
      <a rel="prev" class="post-nav-item mdui-float-left" href="/2022/02/22/hello-world/">
        <i class="iconfont icon-angle-left"></i>
        <span>Hello World</span>
      </a>
    
    
      <a rel="next" class="post-nav-item mdui-float-right" href="/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/css3/">
        <span>css3</span>
        <i class="iconfont icon-angle-right"></i>
      </a>
    
  </nav>
</article>




  <div class="toc-button"  style="z-index: 100;">
    <button class="mdui-fab mdui-ripple mdui-color-teal" mdui-menu="{target: '#toc'}"><i class="iconfont icon-list"></i></button>
    <ul class="mdui-menu" id="toc">
      <li class="mdui-menu-item">
        <a href="/2022/02/21/%E8%A1%8C%E4%B8%9A%E6%8A%A5%E5%91%8A/Angular/" id="toc-header" class="mdui-ripple">文章目录</a>
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#AngularJS"><span class="toc-number">1.</span> <span class="toc-text">AngularJS</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%A7%E7%94%9F%E8%83%8C%E6%99%AF"><span class="toc-number">2.</span> <span class="toc-text">产生背景</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%BA%93-%E7%B1%BB%E5%BA%93%E6%98%AF%E4%B8%80%E4%BA%9B%E5%87%BD%E6%95%B0%E7%9A%84%E9%9B%86%E5%90%88%EF%BC%8C%E5%AE%83%E8%83%BD%E5%B8%AE%E5%8A%A9%E4%BD%A0%E5%86%99WEB%E5%BA%94%E7%94%A8%E3%80%82%E8%B5%B7%E4%B8%BB%E5%AF%BC%E4%BD%9C%E7%94%A8%E7%9A%84%E6%98%AF%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81%EF%BC%8C%E7%94%B1%E4%BD%A0%E6%9D%A5%E5%86%B3%E5%AE%9A%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8%E7%B1%BB%E5%BA%93%E3%80%82%E7%B1%BB%E5%BA%93%E6%9C%89%EF%BC%9AjQuery%E7%AD%89"><span class="toc-number">2.1.</span> <span class="toc-text">类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A1%86%E6%9E%B6-%E6%A1%86%E6%9E%B6%E6%98%AF%E4%B8%80%E7%A7%8D%E7%89%B9%E6%AE%8A%E7%9A%84%E3%80%81%E5%B7%B2%E7%BB%8F%E5%AE%9E%E7%8E%B0%E4%BA%86%E7%9A%84WEB%E5%BA%94%E7%94%A8%EF%BC%8C%E4%BD%A0%E5%8F%AA%E9%9C%80%E8%A6%81%E5%AF%B9%E5%AE%83%E5%A1%AB%E5%85%85%E5%85%B7%E4%BD%93%E7%9A%84%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%E3%80%82%E8%BF%99%E9%87%8C%E6%A1%86%E6%9E%B6%E6%98%AF%E8%B5%B7%E4%B8%BB%E5%AF%BC%E4%BD%9C%E7%94%A8%E7%9A%84%EF%BC%8C%E7%94%B1%E5%AE%83%E6%9D%A5%E6%A0%B9%E6%8D%AE%E5%85%B7%E4%BD%93%E7%9A%84%E5%BA%94%E7%94%A8%E9%80%BB%E8%BE%91%E6%9D%A5%E8%B0%83%E7%94%A8%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81%E3%80%82%E6%A1%86%E6%9E%B6%E6%9C%89%EF%BC%9Aknockout%E3%80%81sproutcore%E7%AD%89%E3%80%82"><span class="toc-number">2.2.</span> <span class="toc-text">框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。</span></a></li></ol></li></ol>
      </li>
    </ul>
  </div>



    <div id="comment" class="mdui-card mdui-p-a-2 mdui-m-b-5">
      <div class="mdui-tab" mdui-tab>
        
          <a href="#comment-tab0" class="mdui-ripple">gitalk</a>
        
          <a href="#comment-tab1" class="mdui-ripple">livere</a>
        
      </div>
      
        <div id="comment-tab0" class="mdui-p-a-2">
          <div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>
<script>
  var gitalk = new Gitalk({
    clientID: '',
    clientSecret: '',
    repo: '',
    owner: '',
    admin: [''],
    id:  md5(location.pathname) ,
    distractionFreeMode: 'true',
  });
  gitalk.render('gitalk-container');
</script>
        </div>
      
        <div id="comment-tab1" class="mdui-p-a-2">
          <div id="lv-container" data-id="city" data-uid="">
  <script type="text/javascript">
    (function (d, s) {
      var j, e = d.getElementsByTagName(s)[0];
      if (typeof LivereTower === 'function') { return; }
      j = d.createElement(s);
      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
      j.async = true;
      e.parentNode.insertBefore(j, e);
    })(document, 'script');
  </script>
  <noscript>Please enable JavaScript to view the comments powered by LiveRe.</noscript>
</div>
        </div>
      
    </div>

  </main>
  <footer id="footer" class="mdui-text-center mdui-m-t-5 mdui-p-b-2 mdui-p-t-4 mdui-color-theme">
  <div class="mdui-container">
    <div class="mdui-row">
      
        <a href="https://beian.miit.gov.cn" rel="noopener" target="_blank"></a>
      
      <span>
        &copy; 2015 - 2022 
        
          <span style="color:#d9333f" class="iconfont icon-heart"></span>
        
        John Doe
      </span>
    </div>
    <div class="mdui-row">
      
        <div class="mdui-col-xs-6 mdui-text-right">
          <span>Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a></span>
        </div>
        <div class="mdui-col-xs-6 mdui-text-left">
          <span>Theme: <a href="https://github.com/kb1000fx/Meadow" rel="noopener" target="_blank">Meadow</a></span>
        </div>
      
    </div>
    <div class="mdui-row">
      
        <div class="mdui-col-xs-6 mdui-text-right">
          <span id="busuanzi_container_site_uv" style="display: none;"> <span class="iconfont icon-user"></span>总访客量 <span id="busuanzi_value_site_uv"></span></span>
        </div>
        <div class="mdui-col-xs-6 mdui-text-left">
          <span id="busuanzi_container_site_pv" style="display: none;"> <span class="iconfont icon-eye"></span>总访问量 <span id="busuanzi_value_site_pv"></span></span>
        </div>
      
    </div>
 </div>
</footer>
  
  <button id="gotop" class="mdui-fab mdui-fab-fixed mdui-fab-hide mdui-ripple mdui-color-teal" style="z-index:100;"><i class="iconfont icon-arrowup"></i></button>
  
  

    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>




    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.8/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({
        startOnLoad: true,
        theme: "default"
    });</script>




    
<script src="/js/mdui.min.v1.0.0.js"></script>




<script src="/js/meadow.js"></script>

</body>
</html >